<template>
    <view>
        <!-- 订单中心 -->
        <view v-if="pageData.template == 1">
            <view class="card bgwhite">
                <view class="title d-flex a-center" v-if="pageData.title">
                    <view class="size30 color_33 bold flex-1">{{ pageData.title }}</view>
                    <view class="color_82" @click="toUrl('/pages/index/orderList')">查看全部订单</view>
                    <text class="iconfont icon-xiangyouxiayiye h6 color_82"></text>
                </view>
                <view class="p-bot24">
                    <view class="d-inline-block w-20 text-center p-top30" @click="toUrl('/pages/index/orderList')" v-if="!pageData.title">
                        <image class="icon" :src="imgUrl + 'Uploads/diy/userCenter/mainOrder.png'" mode="aspectFit"></image>
                        <view class="color_22 m-top12">我的订单</view>
                    </view>
                    <view class="d-inline-block w-20 text-center p-re" v-for="(item,index) in list1" :key="index" :data-num="orderCount[item.field]"
                        :class="{unread: parseInt(orderCount[item.field]) > 0}" @click="toUrl('/pages/index/orderList?status='+item.status)">
                        <image class="icon" :src="staticUrl+'/images/jh_up/'+item.img" mode="aspectFit"></image>
                        <view class="color_22 m-top12">{{ item.text }}</view>
                    </view>
                </view>
            </view>

            <!-- 订单状态 -->
		    <orderStatus></orderStatus>
        </view>
        
        <!-- 仓库中心 -->
        <view class="card bgwhite" v-if="pageData.template == 2 && Result.warehouse_mode == 1">
			<view class="title size30 color_33 bold" v-if="pageData.title">{{ pageData.title }}</view>
			<view class="p-bot24" :class="{'p-top30': !pageData.title}">
				<view class="d-inline-block w-20 text-center p-re" v-for="(item,index) in list2" :key="index" @click="toUrl(item.path)">
					<image class="icon" :src="item.img" mode="aspectFit"></image>
					<view class="color_22 m-top12">{{ item.text }}</view>
				</view>
			</view>
		</view>

        <!-- 分享赚钱 -->
        <view class="card bgwhite" v-if="pageData.template == 3 && configJson.distributionMode != 0">
			<view class="title d-flex a-center" v-if="pageData.title">
                <view class="size30 color_33 bold flex-1">{{ pageData.title }}</view>
                <view class="d-flex a-center" @click="showShareQr = true">
                    <image :src="$online('code.png')" mode="widthFix" class="code m-right10"></image>
                    <view class="color_82">推广海报</view>
                </view>
            </view>
			<view class="p-bot24" :class="{'p-top30': !pageData.title}">
				<view class="d-inline-block w-20 text-center" v-for="(item,index) in list3" :key="index" @click="toUrl(item.path)">
					<image class="icon" :src="item.img" mode="aspectFit"></image>
					<view class="color_22 m-top12">{{ item.text }}</view>
				</view>
			</view>
		</view>

        <SharePoster v-if='showShareQr' myid=' ' type='1' pageType='0' @closePoster='showShareQr = false'></SharePoster>
        
        <!-- 常用功能 -->
        <view class="card bgwhite" v-if="pageData.template == 4">
			<view class="title size30 color_33 bold" v-if="pageData.title">{{ pageData.title }}</view>
			<view :class="{'p-top30': !pageData.title}">
                <block v-for="(item,index) in finalList" :key="index">
                    <!-- 特殊处理 -->
                    <block v-if="item.path == '/userPage/distributors/fenxiaoCenter?state=0'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="configJson.distributionMode != 0 && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                    <block v-else-if="item.path == '/answer/curriculum'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="Result.courseGoodsCount > 0 && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                    <block v-else-if="item.path == '/userPage/user/aboutUs'">
                        <view class="gridItem" @click="toUrl(item.path + '?listId=' + Result.about_us_list_id)" v-if="Result.about_us_list_id && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                    <block v-else-if="item.path == '/userPage/Install/Install'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="Result.isDispatchStaff == 1 && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view> <!-- Result.isDispatchStaff_name -->
                        </view>
                    </block>
                    <block v-else-if="item.path == '/privatePage/index/index'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="userinfo.is_private_member == 1 && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                
                    <block v-else>
                        <view class="gridItem" @click="toUrl(item.path)" v-if="item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                </block>
                <view class="gridItem" @click="open" v-if="Result.warehouse_mode == 1 && userinfo.refund_num > 0">
                    <image class="icon" :src="imgUrl + 'Uploads/diy/userCenter/refund.png'" mode="aspectFit"></image>
                    <view class="color_22 m-top12">退押金</view>
                </view>
			</view>
		</view>
    </view>
</template>

<script>
import orderStatus from '@/components/User/orderStatus.vue'
import SharePoster from "@/components/sharePoster.vue"
import { mapState, mapMutations } from 'vuex'

const base = 'http://sraimgcdn2.mogoie.com/Uploads/diy/userCenter/'
export default {
    props: ['pageData', 'orderCount', 'Result', 'userinfo', 'configJson'],
    data() {
        return {
            staticUrl: this.staticUrl,
            imgUrl: this.imgUrl,
            showShareQr: false,
            list1: [
                { text: '待支付', img: 'icon-daifukuan.png', status: 0, field: 'unpay' },
                { text: '待收货', img: 'icon-daifahuo.png', status: 3, field: 'delivery' },
                { text: '待评价', img: 'icon-daipingjia.png', status: 4, field: 'comment' },
                { text: '已评价', img: 'icon-yipingjia.png', status: 5 },
                { text: '退款/售后', img: 'icon-tuikuan.png', status: 6, field: 'refund' }
            ],
            list2: [
                { text: '我的仓库', img: base+'myRoom.png', path: '/warehouse/house' }, // noPayOrde['availableGoodsCount']
                { text: '待发货', img: base+'unshipped.png', path: '/warehouse/house?status=3' },
                { text: '待收货', img: base+'unreceived.png', path: '/warehouse/house?status=4' },
                { text: '已使用', img: base+'used.png', path: '/warehouse/house?status=2' },
                { text: '赠送记录', img: base+'giftRecord.png', path: '/warehouse/giftrecord' }
            ],
            list3: [
                { text: '分销中心', img: base+'distribution.png', path: '/userPage/distributors/fenxiaoCenter' },
                { text: '我的好友', img: base+'friend.png', path: '/moneyPage/distributors/myFans' },
                { text: '分销订单', img: base+'suborder.png', path: '/moneyPage/distributors/fenxiaoOrder' },
                { text: '佣金明细', img: base+'commission.png', path: '/moneyPage/capital/brokerage_list' },
                { text: '去提现', img: base+'withdraw.png', path: '/moneyPage/capital/withdraws' }
            ],
            list4: [
                { text: '客服中心', img: base+'service.png', path: 'customerService', show: true },
                { text: '地址管理', img: base+'address.png', path: '/orderPage/Addresslist/Addresslist', show: true },
                { text: '分享赚钱', img: base+'share.png', path: '/userPage/distributors/fenxiaoCenter?state=0', show: true },
                { text: '我的预约', img: base+'myReserve.png', path: '/pages/reserve/myRreserve', show: true },
                { text: '我的评价', img: base+'myReview.png', path: '/commentPage/comment/myComment', show: true },
                { text: '我的课程', img: base+'myCourse.png', path: '/answer/curriculum', show: true },
                { text: '关于我们', img: base+'aboutUs.png', path: '/userPage/user/aboutUs', show: true },
                { text: '派单', img: base+'dispatch.png', path: '/userPage/Install/Install', show: true },
                { text: '私域运营', img: base+'operation.png', path: '/privatePage/index/index', show: true }
            ]
        }
    },
    computed: {
        ...mapState(['vid', 'startUp']),
        finalList() {
            if (this.pageData.list) {
                return this.pageData.list
            } else {
                return this.list4
            }
        }
    },
    components: {
        orderStatus,
        SharePoster
    },
    created() {
        // 数据处理
        if(this.pageData.template == 1) {
            if(this.startUp.delivery == 2) {
                this.list1[1].text = '待核销'
                this.list1[1].img = 'icon-daihexiao.png'
            }
            if(!this.pageData.title) this.list1.splice(3, 1)
        }
        if(this.pageData.template == 2 && !this.pageData.title) {
            this.list2[0].img = this.imgUrl + 'Uploads/diy/userCenter/mainRoom.png'
        }
    },
    methods: {
        ...mapMutations(['setHomeKefu']),
        toUrl(url){
            if(!this.vid) return this.$emit('openModal')
            if(url == 'customerService') return this.showKefu_()
            uni.navigateTo({
				url
			})
        },
        showKefu_(){
            if (this.configJson.serviceImg) {
                this.toUrl('/userPage/user/introduce?type=2')
            } else {
                this.setHomeKefu({showKefu: true})
            }
        },
        open(){
            this.$emit('openDeposit')
        }
    }
}
</script>

<style lang="scss" scoped>
.card {
	margin: 24rpx;
	border-radius: 12rpx;
    .title {
        padding: 24rpx 24rpx 40rpx 24rpx;
    }
    .gridItem {
        display: inline-block;
        width: 20%;
        text-align: center;
        margin-bottom: 24rpx;
    }
	.icon {
		width: 50rpx;
		height: 50rpx;
	}
    .code {
        width: 30rpx;
        background: #999;
    }
}
</style>